<script setup lang="ts">
defineProps({
  arr: {
    type: Object,
    required: true
  }
})
</script>
<template>
  <div class="list-button">
    <div class="button-box"
         v-for="(item,index) in arr" :key="item.id"
         :style="{
           transform:`skewX(-27deg) translateX(${index*(-2)}em)`,
           backgroundColor:item.backgroundColor??'rgba(0, 0, 255, 0.2)',
           color:item.color??'white'
         }">
      <div class="icon">
        <img class="img"
             :src="item.src"
             alt="item.title"
             :style="{height:item.srcHeight}"
        />
      </div>
      <div class="text">
        <p class="main-text" :style="{color:item.textColor}">{{ item.title }}</p>
        <p class="eng-text" :style="{color:item.engTextColor}">{{ item.engTitle }}</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.list-button {
  position: absolute;
  right: 1em;
  top: calc(100vh - 32em);
  width: 15em;

  > * + * {
    margin-top: 0.5em;
  }

  .button-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3em 0;
    border-radius: 0.2em;

    .img {
      transform: skewX(27deg);
    }

    .text {
      display: flex;
      flex-direction: column;
      transform: skewX(27deg);
      padding-left: 1em;

      .main-text {
        font-size: 1.2em;
        font-weight: bold;
      }

      .eng-text {
        transform: scale(0.6);
        font-weight: bold;
        color: #2bbad8;
      }
    }
  }

  .button-box::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    border-top: 0.2em solid white;
    border-left: 0.2em solid white;
    border-right: transparent;
    border-bottom: transparent;
    width: 1.4em;
    height: 1.2em;
    border-radius: 0.2em;
  }
}

@media (max-height: 540px) {
  .list-button {
    top: 2em;
  }
}

</style>